<template>
  <div class="full-process-bg">
    <div class="process-steps-top">
      <div class="steps-inner">
        <a-steps :current="currentStep" size="small" style="padding: 0 20px">
          <a-step v-for="(item, idx) in stepList" :key="item.title">
            <template #icon>
              <span
                v-if="stepFailStatus[idx] === 1"
                style="color: #f11012; font-size: 18px; font-weight: bold"
                >✖</span
              >
              <span v-else></span>
            </template>
            <template #title>
              <span class="step-title">{{ item.title }}</span>
            </template>
          </a-step>
        </a-steps>
      </div>
    </div>
    <div class="process-content-large">
      <transition name="fade" mode="out-in">
        <div :key="currentStep" class="content-wrapper">
          <template v-if="currentStep === 0">
            <div class="step-card big-card resume-card-scroll">
              <template v-if="resumeStatus === 'intro'">
                <h2>简历投递</h2>
                <div class="desc-text left-align">
                  请上传你的简历，并选择面试公司、领域和岗位，系统将模拟企业HR进行筛选，提升真实体验。
                </div>
                <a-form layout="vertical" class="resume-form-beauty">
                  <a-form-item label="面试公司">
                    <a-select
                      v-model:value="form.companyId"
                      :options="companyList"
                      placeholder="请选择公司"
                      allow-clear
                      @change="handleCompanyChange"
                    />
                  </a-form-item>
                  <a-form-item label="面试领域">
                    <a-select
                      v-model:value="form.techFieldId"
                      :options="techFieldList"
                      placeholder="请选择领域"
                      allow-clear
                      @change="handleTechFieldChange"
                    />
                  </a-form-item>
                  <a-form-item label="面试岗位">
                    <a-select
                      v-model:value="form.positionId"
                      :options="positionList"
                      placeholder="请选择岗位"
                      allow-clear
                    />
                  </a-form-item>
                  <a-form-item label="上传简历">
                    <a-upload
                      :custom-request="handleUpload"
                      :show-upload-list="false"
                      :before-upload="beforeUpload"
                    >
                      <a-button size="large">上传简历（PDF）</a-button>
                    </a-upload>
                    <div v-if="form.resume" class="resume-info" style="margin-top: 8px">
                      已上传：<span class="resume-link">{{ form.resume.name }}</span>
                    </div>
                  </a-form-item>
                </a-form>
              </template>
              <template v-else-if="resumeStatus === 'judging'">
                <h2>正在筛选简历</h2>
                <div class="desc-text">系统正在模拟企业HR筛选您的简历，请稍候...</div>
                <a-spin size="large" style="margin-top: 40px" />
              </template>
              <template v-else-if="resumeStatus === 'result'">
                <template v-if="resumePass">
                  <h2>简历筛选通过</h2>
                  <div class="desc-text">恭喜你的简历通过筛选，进入下一轮笔试！</div>
                  <a-button type="primary" size="large" class="main-btn" @click="nextStep">
                    进入下一轮
                  </a-button>
                </template>
                <template v-else>
                  <h2>简历筛选未通过</h2>
                  <div class="desc-text">很遗憾，你的简历未通过筛选。</div>
                  <a-button type="primary" size="large" class="main-btn" @click="viewAnalysisReport"
                    >查看分析报告
                  </a-button>
                </template>
              </template>
            </div>
          </template>
          <template v-else-if="currentStep === 1">
            <div class="step-card big-card exam-card-scroll">
              <template v-if="examStatus === 'intro'">
                <h2>笔试须知</h2>
                <div class="desc-text left-align">
                  本次笔试一共有18道题，限时90分钟。<br />
                  单选题：单选题每题2分，共10道题，总分10分，问答题：问答题每题10分，共6道题，总分60分。编程题：编程题每题10分，共2道题，总分20分。<br />
                  请认真作答，系统将自动评判。<br />
                  注意事项：<br />
                  1. 保持网络畅通，避免中途退出。<br />
                  2. 作答期间请勿刷新页面。<br />
                  3. 提交后不可修改答案。
                </div>
                <a-button type="primary" size="large" class="main-btn" @click="handleStartExam"
                  >开始笔试
                </a-button>
              </template>
              <template v-else-if="examStatus === 'judging'">
                <h2>正在评判笔试</h2>
                <div class="desc-text">系统正在自动评判您的笔试答案，请稍候...</div>
                <a-spin size="large" style="margin-top: 40px" />
              </template>
              <template v-else-if="examStatus === 'result'">
                <template v-if="examPass">
                  <h2>笔试通过</h2>
                  <div class="desc-text">恭喜你通过笔试，进入下一轮面试！</div>
                  <a-button type="primary" size="large" class="main-btn" @click="handleExamNext"
                    >进入下一轮
                  </a-button>
                </template>
                <template v-else>
                  <h2>笔试未通过</h2>
                  <div class="desc-text">很遗憾，您的笔试未通过。</div>
                  <a-button type="primary" size="large" class="main-btn" @click="viewAnalysisReport"
                    >查看分析报告
                  </a-button>
                </template>
              </template>
            </div>
          </template>
          <template v-else-if="currentStep === 2">
            <div class="step-card big-card interview-card-scroll">
              <template v-if="techStatus === 'intro'">
                <h2>技术面试须知</h2>
                <div class="desc-text left-align">
                  技术面试将考察你的专业能力、项目经验与沟通表达。<br />
                  请自信作答，充分展现你的技术实力。<br />
                  注意事项：<br />
                  1. 回答要条理清晰，突出亮点。<br />
                  2. 结合实际项目经验说明。<br />
                  3. 保持良好沟通。
                </div>
                <div class="interview-confirm-info">
                  <div class="interviewer-avatar">
                    <img src="/src/assets/cartoonInterviewer.png" alt="面试官" />
                  </div>
                  <div class="interviewer-info">
                    <div class="interviewer-name">高级技术面试官</div>
                    <div class="interviewer-desc">将对你的技术能力进行深度考察。</div>
                  </div>
                </div>
                <a-button type="primary" size="large" class="main-btn" @click="handleStartTech"
                  >开始面试
                </a-button>
              </template>
              <template v-else-if="techStatus === 'judging'">
                <h2>正在评判技术面试</h2>
                <div class="desc-text">系统正在自动评判您的技术面试表现，请稍候...</div>
                <a-spin size="large" style="margin-top: 40px" />
              </template>
              <template v-else-if="techStatus === 'result'">
                <template v-if="techPass">
                  <h2>技术面试通过</h2>
                  <div class="desc-text">恭喜你通过技术面试，进入下一轮！</div>
                  <a-button type="primary" size="large" class="main-btn" @click="handleTechNext"
                    >进入下一轮
                  </a-button>
                </template>
                <template v-else>
                  <h2>技术面试未通过</h2>
                  <div class="desc-text">很遗憾，您的技术面试未通过。</div>
                  <a-button type="primary" size="large" class="main-btn" @click="viewAnalysisReport"
                    >查看分析报告
                  </a-button>
                </template>
              </template>
            </div>
          </template>
          <template v-else-if="currentStep === 3">
            <div class="step-card big-card interview-card-scroll">
              <template v-if="hrStatus === 'intro'">
                <h2>HR面试须知</h2>
                <div class="desc-text left-align">
                  HR面试将考察你的职业素养、岗位匹配度与发展潜力。<br />
                  请自信作答，展现你的综合素质。<br />
                  注意事项：<br />
                  1. 回答要真诚自信，突出优势。<br />
                  2. 结合实际经历说明。<br />
                  3. 展现良好职业规划。
                </div>
                <div class="interview-confirm-info">
                  <div class="interviewer-avatar">
                    <img src="/src/assets/cartoonInterviewer.png" alt="HR" />
                  </div>
                  <div class="interviewer-info">
                    <div class="interviewer-name">高级HR面试官</div>
                    <div class="interviewer-desc">将考察你的职业素养与发展潜力。</div>
                  </div>
                </div>
                <a-button type="primary" size="large" class="main-btn" @click="handleStartHr"
                  >开始面试
                </a-button>
              </template>
              <template v-else-if="hrStatus === 'judging'">
                <h2>正在评判HR面试</h2>
                <div class="desc-text">系统正在自动评判您的HR面试表现，请稍候...</div>
                <a-spin size="large" style="margin-top: 40px" />
              </template>
              <template v-else-if="hrStatus === 'result'">
                <template v-if="hrPass">
                  <h2>HR面试通过</h2>
                  <div class="desc-text">恭喜你通过HR面试，进入下一轮！</div>
                  <a-button type="primary" size="large" class="main-btn" @click="handleHrNext"
                    >进入下一轮
                  </a-button>
                </template>
                <template v-else>
                  <h2>HR面试未通过</h2>
                  <div class="desc-text">很遗憾，您的HR面试未通过。</div>
                  <a-button type="primary" size="large" class="main-btn" @click="viewAnalysisReport"
                    >查看分析报告
                  </a-button>
                </template>
              </template>
            </div>
          </template>
          <template v-else-if="currentStep === 4">
            <div class="step-card big-card" style="padding-top: 50px">
              <template v-if="offerStatus === 'intro'">
                <h2>恭喜你获得Offer！</h2>
                <div class="offer-info">
                  <span>你已通过所有环节，可以生成全流程分析报告！</span>
                </div>
                <a-button
                  type="primary"
                  size="large"
                  class="main-btn"
                  @click="handleFullProcessInterviewReport"
                  >生成全流程分析报告
                </a-button>
              </template>
              <template v-else-if="offerStatus === 'judging'">
                <h2>正在生成全流程分析报告</h2>
                <div class="desc-text">系统正在生成全流程分析报告，请稍候...</div>
                <a-spin size="large" style="margin-top: 40px" />
              </template>
              <template v-else-if="offerStatus === 'result'">
                  <a-button
                    type="primary"
                    size="large"
                    class="main-btn"
                    @click="viewFullProcessInterviewReport"
                    >查看全流程分析报告
                  </a-button>
              </template>
            </div>
          </template>
        </div>
      </transition>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue'
import { message } from 'ant-design-vue'
import {
  analyzeFullProcessInterviewAnalyzeUsingGet,
  checkExamAnalyzeStatusAndJudgeUsingGet,
  checkHrInterviewAnalyzeStatusAndJudgeUsingGet,
  checkResumeAnalyzeStatusAndJudgeUsingGet,
  checkTecInterviewAnalyzeStatusAndJudgeUsingGet,
  fullInterviewNextStepUsingGet,
  generateExamWithFullUsingPost,
  generateHrInterviewWithFullUsingPost,
  generateTecInterviewWithFullUsingPost,
  uploadResumeUsingPost,
} from '@/api/fullInterviewController'
import { useLoadingPage } from '@/utils/LoadingHelper'
import { useRoute, useRouter } from 'vue-router'
import { getLocalCache, setLocalCache, removeLocalCache } from '@/utils/LocalStorageUtils'
import { saveInterviewTypeUsingGet } from '@/api/userController'
import {
  getCompanyListUsingGet,
  getPositionListUsingGet,
  getTechFieldListUsingGet,
} from '@/api/positionController'

const route = useRoute()
const router = useRouter()
const { withLoading } = useLoadingPage(router)

//获取到全流程面试id
const id = route.query.fullInterviewId
//将全流程面试id存入缓存中存入缓存中
setLocalCache('fullInterviewId', id)

//当前步骤
const currentStep = ref(0)

const resumeId = ref()
const form = reactive({
  resume: null as any,
  companyId: '',
  techFieldId: '',
  positionId: '',
})

const stepList = [
  { title: '简历投递' },
  { title: '笔试' },
  { title: '技术面' },
  { title: 'HR面' },
  { title: 'Offer' },
]

const companyList = ref([])
const techFieldList = ref([])
const positionList = ref([])
const resumeStatus = ref<'intro' | 'judging' | 'result'>('intro')
const resumePass = ref(false)
const examStatus = ref<'intro' | 'judging' | 'result'>('intro')
const examPass = ref(false)

const techStatus = ref<'intro' | 'judging' | 'result'>('intro')
const techPass = ref(false)

const hrStatus = ref<'intro' | 'judging' | 'result'>('intro')
const hrPass = ref(false)

const offerStatus = ref<'intro' | 'judging' | 'result'>('intro')

// 步骤状态管理
const stepFailStatus = ref([-1, -1, -1, -1]) // -1:未评判, 0:通过, 1:未通过
watch([resumeStatus, examStatus, techStatus, hrStatus], () => {
  stepFailStatus.value[0] = resumeStatus.value === 'result' ? (resumePass.value ? 0 : 1) : -1
  stepFailStatus.value[1] = examStatus.value === 'result' ? (examPass.value ? 0 : 1) : -1
  stepFailStatus.value[2] = techStatus.value === 'result' ? (techPass.value ? 0 : 1) : -1
  stepFailStatus.value[3] = hrStatus.value === 'result' ? (hrPass.value ? 0 : 1) : -1
})

/**
 * 文件上传
 * @param file 简历文件
 */
const handleUpload = async ({ file }: any) => {
  message.success('正在进行简历筛选...')
  //切换为加载状态
  resumeStatus.value = 'judging'
  const params = {
    fullInterviewId: id,
    companyId: form.companyId,
    techFieldId: form.techFieldId,
    positionId: form.positionId,
  }

  //上传简历
  const data = await uploadResumeUsingPost(params as any, {}, file)
  resumeId.value = data.data

  //将面试信息存储到缓存中(面试公司Id，面试岗位id，技术领域id，简历id)
  const interviewInfo = {
    resumeId: resumeId.value,
    companyId: form.companyId,
    techFieldId: form.techFieldId,
    positionId: form.positionId,
  }
  setLocalCache('interviewInfo', JSON.stringify(interviewInfo))

  //发送请求等待简历分析完成
  const result = await checkResumeAnalyzeStatusAndJudgeUsingGet({
    resumeId: resumeId.value,
  })
  //判断是否通过
  resumePass.value = !!result.data
  resumeStatus.value = 'result'
}

/**
 * 点击下一步
 */
const nextStep = async () => {
  if (currentStep.value < 4) currentStep.value++
  //保存当前步骤
  await fullInterviewNextStepUsingGet({
    fullInterviewId: id as any,
    step: currentStep.value,
  })

  //将当前步骤存入 localstorage
  setLocalCache('currentStep', currentStep.value)
}
/**
 * 重置状态
 */
const resetProcess = () => {
  removeLocalCache('currentStep')
  removeLocalCache('interviewInfo')
  removeLocalCache('fullInterviewId')

  //跳转到全流程记录页面
  router.replace('/full/interview/records')
}
/**
 * 格式校验
 * @param file
 */
const beforeUpload = (file: any) => {
  if (!form.companyId || !form.techFieldId || !form.positionId)
    return message.error('请填写完整信息')
  if (!file.name.endsWith('.pdf')) {
    message.error('请上传PDF格式的简历')
    return false
  }
  form.resume = file
}
/**
 * 开始笔试
 */
const handleStartExam = () => {
  //取出面试信息(面试公司，面试岗位id，技术领域id)
  const cachedData = getLocalCache('interviewInfo')
  const interviewInfo = JSON.parse(cachedData)

  //保存笔试岗位
  setLocalCache('examPosition', getPositionName(interviewInfo.positionId))

  //生成笔试题
  withLoading(
    () =>
      generateExamWithFullUsingPost({
        fullProcessInterviewId: id as any,
        techFieldId: interviewInfo.techFieldId as any,
        positionId: interviewInfo.positionId as any,
        companyId: interviewInfo.companyId,
      }),
    `/api/written/interview`, // 操作完成后跳转回当前页面
    '/',
    'exam',
    true,
  )
}
const handleExamNext = () => {
  nextStep()
  examStatus.value = 'intro'
}
/**
 * 开始技术面
 */
const handleStartTech = async () => {
  //保存技术面试数据，跳转到技术面试页面

  //取出面试信息(面试公司，面试岗位id，技术领域id)
  const cachedData = getLocalCache('interviewInfo')
  const interviewInfo = JSON.parse(cachedData)

  //将面试官id存储本地缓存中
  setLocalCache('interviewerId', 1)
  //将面试官头像存储本地缓存中
  setLocalCache(
    'interviewerAvatar',
    'https://zx-1343343346.cos.ap-chongqing.myqcloud.com/ai_interview/ai_interview_photo/interviewer1.png',
  )
  //将面试官性别存储到本地缓存中
  setLocalCache('interviewerGender', '男')

  message.success('开始技术面试')
  // 存储用户面试类型 0-技术面，1-hr面
  await saveInterviewTypeUsingGet({
    type: 0,
  })

  // 跳转到加载页面
  await withLoading(
    //发送请求生成技术面记录
    () =>
      generateTecInterviewWithFullUsingPost({
        companyId: interviewInfo.companyId,
        fullInterviewId: id as any,
        interviewerGender: '男',
        interviewerType: '严肃型',
        languageMode: 'chinese',
        positionId: interviewInfo.positionId as any,
        resumeId: interviewInfo.resumeId as any,
        techFieldId: interviewInfo.techFieldId as any,
      }),
    `/api/tec/interview/chinese`, // 操作完成后跳转回当前页面
    '/',
    'tec',
    true,
  )
}
const handleTechNext = () => {
  nextStep()
  techStatus.value = 'intro'
}
/**
 * 开始hr面
 */
const handleStartHr = async () => {
  //保存Hr面试数据，跳转到Hr面试页面

  //取出面试信息(面试公司，面试岗位id，技术领域id)
  const cachedData = getLocalCache('interviewInfo')
  const interviewInfo = JSON.parse(cachedData)

  //将面试官id存储本地缓存中
  setLocalCache('interviewerId', 1)
  //将面试官url存储本地缓存中
  setLocalCache(
    'interviewerAvatar',
    'https://zx-1343343346.cos.ap-chongqing.myqcloud.com/ai_interview/ai_interview_photo/interviewer1.png',
  )
  //将面试官性别存储到本地缓存中
  setLocalCache('interviewerGender', '男')

  message.success('开始hr面试')

  //存储用户面试类型 0-技术面，1-hr面
  await saveInterviewTypeUsingGet({
    type: 1,
  })
  //跳转到加载页面
  await withLoading(
    () =>
      generateHrInterviewWithFullUsingPost({
        companyId: interviewInfo.companyId,
        fullInterviewId: id as any,
        interviewerGender: '男',
        interviewerType: '严肃型',
        languageMode: 'chinese',
        positionId: interviewInfo.positionId as any,
        resumeId: interviewInfo.resumeId as any,
        techFieldId: interviewInfo.techFieldId as any,
      }),
    `/api/hr/interview/chinese`, // 操作完成后跳转回当前页面
    '/',
    'hr',
    true,
  )
}
const handleHrNext = () => {
  nextStep()
  hrStatus.value = 'intro'
}

/**
 * 生成全流程分析报告
 */
const handleFullProcessInterviewReport = async () => {
  offerStatus.value = 'judging'
  //发送请求生成全流程分析报告
  const data = await analyzeFullProcessInterviewAnalyzeUsingGet({
    fullProcessInterviewId: id as any,
  })
  offerStatus.value = 'result'
  if (!data.data) message.error('全流程报告生成失败：' + data.message)
}

/**
 * 查看全流程分析报告
 */
const viewFullProcessInterviewReport = () => {
  //清空面试状态
  resetProcess()
  //跳转到全流程记录页面
  router.replace('/full/interview/records')
}

/**
 * 查看分析报告（除了全流程报告）
 */
const viewAnalysisReport = () => {
  //跳转到全流程记录页面
  router.replace('/full/interview/records')
}
/**
 * 修改面试领域后的回调函数
 */
const handleTechFieldChange = async () => {
  positionList.value = []
  form.positionId = ''
  // 获取岗位信息
  await fetchPositionList()
}
/**
 * 修改公司后的回调函数
 */
const handleCompanyChange = async () => {
  techFieldList.value = []
  positionList.value = []
  form.techFieldId = ''
  form.positionId = ''
  //获取技术领域列表
  await fetchTechFieldList()
}
/**
 * 获取公司列表
 */
const fetchCompanyList = async () => {
  const data = await getCompanyListUsingGet()
  data.data.map((item) => {
    companyList.value.push({ value: item.id, label: item.name })
  })
}
/**
 * 获取技术领域列表
 */
const fetchTechFieldList = async () => {
  const data = await getTechFieldListUsingGet()
  data.data.map((item) => {
    techFieldList.value.push({ value: item.id, label: item.name })
  })
}
/**
 * 根据公司id和技术领域id获取岗位列表
 */
const fetchPositionList = async () => {
  if (!form.techFieldId || !form.companyId) return
  const data = await getPositionListUsingGet({
    techFieldId: form.techFieldId as any,
    companyId: form.companyId as any,
  })
  data.data.map((item) => {
    positionList.value.push({ value: item.id, label: item.name })
  })
}
/**
 * 根据岗位id获取岗位名称
 * @param id
 */
const getPositionName = (id) => {
  const position = positionList.value.find((item) => item.value === id)
  return position ? position.label : ''
}
/**
 * 生命周期函数
 */
onMounted(async () => {
  //加载当前步骤
  const step = getLocalCache('currentStep')

  if (step) currentStep.value = step

  //简历筛选
  if (currentStep.value === 0) {
    await fetchCompanyList()
    await fetchTechFieldList()
    await fetchPositionList()
  } else if (currentStep.value === 1) {
    //笔试分析
    // 切换判题状态
    examStatus.value = 'judging'
    // 发送请求获取笔试结果
    const result = await checkExamAnalyzeStatusAndJudgeUsingGet({
      fullInterviewId: id as any,
    })
    examPass.value = !!result.data
    examStatus.value = 'result'
  } else if (currentStep.value === 2) {
    //技术面分析
    techStatus.value = 'judging'
    //发送请求获取技术面试结果
    const result = await checkTecInterviewAnalyzeStatusAndJudgeUsingGet({
      fullInterviewId: id as any,
    })
    techPass.value = !!result.data
    techStatus.value = 'result'
  } else if (currentStep.value === 3) {
    //hr面试分析
    hrStatus.value = 'judging'
    //发送请求获取hr面试结果
    const result = await checkHrInterviewAnalyzeStatusAndJudgeUsingGet({
      fullInterviewId: id as any,
    })
    hrPass.value = !!result.data
    hrStatus.value = 'result'
  }
})
</script>
<style scoped>
.full-process-bg {
  min-height: 100vh;
  width: 100vw;
  background: linear-gradient(135deg, #f7faff 0%, #e8eef5 100%);
  display: block;
  padding: 0;
  position: relative;
  overflow-x: hidden;
}

.step-title {
  font-size: 14px;
  font-weight: 500;
}

.content-wrapper {
  width: 100%;
  display: block;
  padding: 0 20px;
}

.full-process-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 280px;
  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
  z-index: 0;
  clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
}

.process-steps-top {
  width: 100vw;
  background: transparent;
  padding-top: 30px;
  padding-bottom: 20px;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.steps-inner {
  width: 84%;
  max-width: 1400px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(0, 32, 128, 0.12);
  padding: 24px 0 26px 0;
  margin: 0 auto;
  position: relative;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.process-content-large {
  width: 100%;
  min-height: 600px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  z-index: 1;
  padding-bottom: 50px;
  overflow-y: visible;
}

.step-card.big-card {
  overflow: visible;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 32px;
  box-shadow:
    0 20px 80px rgba(0, 32, 128, 0.1),
    0 2px 12px rgba(0, 0, 0, 0.04);
  min-width: calc(100vw - 30vw);
  min-height: 650px;
  margin: 10px 0;
  overflow-y: auto;
  text-align: left;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s ease;
  border: 1px solid rgba(240, 245, 255, 0.9);
}

.step-card h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #1890ff;
  margin-bottom: 24px;
  letter-spacing: 1px;
  text-shadow: 0 6px 32px rgba(24, 144, 255, 0.12);
  text-align: center;
  position: relative;
}

.step-card h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #1890ff, #40a9ff);
  border-radius: 3px;
}

.desc-text {
  font-size: 1.1rem;
  color: #5a6a85;
  margin-bottom: 26px;
  font-weight: 400;
  text-align: center;
  line-height: 1.8;
  max-width: 85%;
}

.exam-card-scroll,
.interview-card-scroll,
.resume-card-scroll {
  width: 100%;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(24, 144, 255, 0.1);
  padding: 24px 18px 18px 18px;
  margin: 0 auto;
  overflow: auto;
  max-height: 600px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  scrollbar-width: thin;
  scrollbar-color: #d0e6fa #f0f4fa;
}

.exam-card-scroll::-webkit-scrollbar,
.interview-card-scroll::-webkit-scrollbar,
.resume-card-scroll::-webkit-scrollbar {
  width: 8px;
  background: #f0f4fa;
  border-radius: 8px;
}

.exam-card-scroll::-webkit-scrollbar-thumb,
.interview-card-scroll::-webkit-scrollbar-thumb,
.resume-card-scroll::-webkit-scrollbar-thumb {
  background: #d0e6fa;
  border-radius: 8px;
}

.resume-info {
  margin: 18px 0 24px 0;
  color: #1890ff;
  font-weight: 500;
  font-size: 1.1rem;
  padding: 12px;
  background: rgba(24, 144, 255, 0.05);
  border-radius: 8px;
  border-left: 3px solid #1890ff;
}

.resume-link {
  color: #40a9ff;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 600;
}

.exam-question-list {
  margin-bottom: 18px;
  font-size: 0.98rem;
  color: #333;
  background: #f5f9ff;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 2px 12px rgba(24, 144, 255, 0.06);
  overflow: auto;
  max-height: 180px;
}

.exam-question {
  margin-bottom: 8px;
  font-size: 0.97rem;
  color: #4a5874;
}

.exam-timer {
  margin-bottom: 18px;
  font-size: 0.98rem;
  color: #1890ff;
  font-weight: 600;
}

.main-btn {
  width: 250px;
  height: 48px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 24px;
  margin-top: 24px;
  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
  color: #fff;
  box-shadow: 0 8px 20px rgba(24, 144, 255, 0.2);
  border: none;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.main-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: all 0.5s;
}

.main-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(24, 144, 255, 0.28);
}

.main-btn:hover::before {
  left: 100%;
}


.offer-info {
  margin: 28px 0 32px 0;
  color: #1890ff;
  font-size: 1.2rem;
  font-weight: 600;
  text-align: center;
  padding: 20px;
  background: rgba(24, 144, 255, 0.05);
  border-radius: 16px;
  position: relative;
  z-index: 1;
}

.interview-confirm-info {
  display: flex;
  align-items: center;
  margin: 28px 0 32px 0;
  justify-content: center;
  padding: 24px;
  background: rgba(24, 144, 255, 0.03);
  border-radius: 16px;
  width: 85%;
  border: 1px solid rgba(24, 144, 255, 0.1);
  transition: all 0.3s ease;
}

.interview-confirm-info:hover {
  background: rgba(24, 144, 255, 0.05);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(24, 144, 255, 0.08);
}

.interviewer-avatar img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(24, 144, 255, 0.2);
  margin-right: 30px;
  border: 3px solid #e6f7ff;
  background: #fff;
  transition: all 0.3s ease;
}

.interview-confirm-info:hover .interviewer-avatar img {
  transform: scale(1.05);
  box-shadow: 0 12px 30px rgba(24, 144, 255, 0.25);
}

.interviewer-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.interviewer-name {
  font-size: 1.3rem;
  font-weight: 600;
  color: #1890ff;
  margin-bottom: 8px;
}

.interviewer-desc {
  font-size: 1.05rem;
  color: #666;
  line-height: 1.5;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-enter-from {
  opacity: 0;
  transform: translateY(30px);
}

.fade-leave-to {
  opacity: 0;
  transform: translateY(-30px);
}

.left-align {
  text-align: left !important;
}

.resume-form-beauty {
  min-width: 460px;
  max-width: 460px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(24, 144, 255, 0.1);
  padding: 30px 24px 15px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid rgba(240, 245, 255, 0.9);
  transition: all 0.3s ease;
}

.resume-form-beauty:hover {
  box-shadow: 0 12px 36px rgba(24, 144, 255, 0.15);
  transform: translateY(-3px);
}

.resume-form-beauty .ant-form-item {
  margin-bottom: 16px;
}

.resume-form-beauty .ant-form-item-label > label {
  font-weight: 500;
  color: #333;
  font-size: 1.05rem;
}

.resume-form-beauty .ant-select,
.resume-form-beauty .ant-input,
.resume-form-beauty .ant-btn {
  border-radius: 12px !important;
  font-size: 15px;
  height: 42px;
}

.resume-form-beauty .ant-select:hover,
.resume-form-beauty .ant-input:hover {
  border-color: #40a9ff;
}

.resume-form-beauty .ant-select-focused,
.resume-form-beauty .ant-input:focus {
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.resume-form-beauty .ant-btn {
  min-width: 160px;
  height: 42px;
  background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
  border: none;
  color: white;
  font-weight: 500;
}

.resume-form-beauty .ant-btn:hover {
  background: linear-gradient(135deg, #69c0ff 0%, #40a9ff 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(24, 144, 255, 0.15);
}

@media (max-width: 1200px) {
  .step-card.big-card {
    padding: 28px 24px 24px 24px;
    min-width: calc(100vw - 40px);
    max-width: calc(100vw - 40px);
    margin: 0 20px 32px 20px;
  }

  .steps-inner {
    width: 95%;
    margin: 0 auto;
  }

  .exam-card-scroll,
  .interview-card-scroll,
  .resume-card-scroll {
    max-height: 500px;
    padding: 18px 12px 12px 12px;
  }

  .desc-text {
    max-width: 95%;
    font-size: 1rem;
  }

  .interview-confirm-info {
    width: 95%;
    padding: 20px;
  }
}

@media (max-width: 900px) {
  .process-content-large {
    min-height: 320px;
  }

  .step-card.big-card {
    min-width: calc(100vw - 40px);
    max-width: calc(100vw - 40px);
    padding: 24px 16px 20px 16px;
    margin: 0 20px 16px 20px;
  }

  .exam-card-scroll,
  .interview-card-scroll,
  .resume-card-scroll {
    max-height: 400px;
    padding: 14px 8px 10px 8px;
  }

  .step-card h2 {
    font-size: 1.7rem;
  }

  .desc-text {
    font-size: 0.95rem;
  }

  .interviewer-avatar img {
    width: 80px;
    height: 80px;
  }

  .resume-form-beauty {
    min-width: 90%;
    max-width: 90%;
  }
}

@media (max-width: 600px) {
  .step-card.big-card {
    padding: 20px 12px 16px 12px;
    min-width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    margin: 0 10px 8px 10px;
  }

  .process-steps-top {
    padding: 18px 0 8px 0;
    margin-bottom: 10px;
  }

  .exam-card-scroll,
  .interview-card-scroll,
  .resume-card-scroll {
    max-height: 350px;
    padding: 10px 6px 6px 6px;
  }

  .resume-form-beauty {
    padding: 16px 12px 10px 12px;
  }

  .step-card h2 {
    font-size: 1.5rem;
    margin-bottom: 18px;
  }

  .desc-text {
    font-size: 0.9rem;
    margin-bottom: 20px;
  }

  .main-btn {
    width: 200px;
    height: 44px;
    font-size: 0.95rem;
  }

  .interviewer-name {
    font-size: 1.1rem;
  }

  .interviewer-desc {
    font-size: 0.9rem;
  }
}

.step-title {
  font-size: 14px;
  font-weight: 500;
}

.content-wrapper {
  width: 100%;
  display: block;
  padding: 0 20px;
}
</style>
